<template>
  <TnNavbar
    fixed
    :bg-color="styleData[currentTabIndex].bgColor"
    text-color="#fff"
    :bottom-shadow="false"
    :placeholder="false"
    back-icon=""
    back-text=" "
    home-icon=""
  >
    <view class="tn-color-white" style="font-size: 30rpx">教材设置</view>
  </TnNavbar>
  <view class="page" :style="{ paddingTop: `${navBarInfo.height}px` }">
    <view
      class="top-box"
      :style="{ background: styleData[currentTabIndex].bgColor }"
    >
      <view class="nav-bar">
        <view
          :class="{ 'current-tab': currentTabIndex == index }"
          v-for="(item, index) in styleData"
          :key="index"
          @tap.stop="toggleTab(index)"
          >{{ item.text }}</view
        >
      </view>
      <view
        class="theme-box"
        :style="{ background: styleData[currentTabIndex].themeBgColor }"
      >
        <view class="left">
          <view class="left-one">
            <image
              :src="styleData[currentTabIndex].finishImg"
              mode="widthFix"
              class="fnish-icon"
            ></image>
            <text :style="{ color: styleData[currentTabIndex].textColor }">{{
              styleData[currentTabIndex].text
            }}</text>
          </view>
          <view
            class="left-two"
            :style="{ color: styleData[currentTabIndex].textColor }"
          >
            {{ styleData[currentTabIndex].text }}
          </view>
        </view>
        <image
          :src="styleData[currentTabIndex].bannerImg"
          mode="widthFix"
          class="right-icon"
        ></image>
      </view>
    </view>
    <view class="list">
      <view
        :class="[
          'list-item',
          currentListItemIndex == item.id ? 'current-list-item' : '',
        ]"
        v-for="(item, index) in list"
        @click="toggleListItem(index, item)"
      >
        <image
          :src="item.picture"
          mode="aspectFill"
          class="textbook-img"
        ></image>
        <view class="textbook-name"> {{ item.name }} </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getGradesApi } from '@/services/api'
import { useUniAppSystemRectInfo } from '@tuniao/tnui-vue3-uniapp/hooks'
import { onShow } from '@dcloudio/uni-app'
import storageApi from '@/utils/storage'
const { navBarInfo } = useUniAppSystemRectInfo()
const styleData = [
  {
    bgColor: '#4B49E8',
    themeBgColor: 'linear-gradient( 124deg, #F3F5F5 0%, #C9E5FF 100%)',
    bannerImg:
      'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/textbook_one.png',
    finishImg: '../../static/imgs/icons/finish_one.png',
    text: '基础教材',
    textColor: '#1580ED',
  },
  {
    bgColor: '#7b5ecf',
    themeBgColor:
      'linear-gradient( 126deg, #EFF0FB 0%, #E4D4FE 59%, #ABC3FF 100%)',
    bannerImg:
      'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/textbook_two.png',
    finishImg: '../../static/imgs/icons/finish_two.png',
    text: '精通教材',
    textColor: '#4B3EF9',
  },
  {
    bgColor: '#e48e47',
    themeBgColor:
      'linear-gradient( 126deg, #FEE4B6 0%, #FDCD79 59%, #F8D48C 100%)',
    bannerImg:
      'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/textbook_three.png',
    finishImg: '../../static/imgs/icons/finish_three.png',
    text: '初中教材',
    textColor: '#9F5300',
  },
]
const list = ref([])
const currentTabIndex = ref(0)
const currentListItemIndex = ref(0)

const toggleTab = (index) => {
  if(currentTabIndex.value == index){
	  return false;
  }
  storageApi.set('currentTabIndex', index)
  currentTabIndex.value = index
  getData()
}

const toggleListItem = (index, item) => {
  currentListItemIndex.value = item.id
  storageApi.set('gradeData', item)
  storageApi.set('currentListItemIndex', item.id)
}

onShow(() => {
  try {
    currentTabIndex.value = Number(storageApi.get('currentTabIndex'))
    currentListItemIndex.value = Number(storageApi.get('currentListItemIndex'))
    getData()
  } catch (err) {}
})

const getData = () => {
  getGradesApi(currentTabIndex.value).then((res) => {
    const { code, data } = res
    if (code === 0) {
      list.value = data
    }
  })
}
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'tuniao-xiaowei';
  src: url('https://resource.tuniaokj.com/images/vue3-template/template2-website/font/tuniao-xiaowei.ttf');
}

/* 顶部背景 start */
.top-bg {
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 100vh;
  z-index: -1;
  // background: linear-gradient(rgb(216, 229, 255), rgb(255, 255, 255));
  background-size: 100% auto;
  height: 100vh;
  background-color: #f1f5fb;
  &::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}
/* 顶部背景 end */

/* 页面内容 start */
.page {
  position: relative;
  width: 100%;
  // padding: 0rpx 32rpx;
  background-color: f1f5fb;
  /* 背景阴影 start*/
  .nav-shadow {
    border-radius: 15rpx;
    color: white;
    // background-color: #FFFFFF;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
    border: 4rpx solid #211e2f;
    margin: 8rpx 1%;
    border-radius: 20rpx;
    background-color: #211e2f;
  }

  /* 用户头像 start */
  .nav-image {
    width: 35rpx;
    height: 35rpx;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
  }

  .nav-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 1rpx solid rgba(255, 255, 255, 0.05);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
}
.top-box {
  background-color: #4b49e8;
  width: 100%;
  height: 340rpx;
  position: relative;
  padding-top: 16rpx;
}
.nav-bar {
  display: flex;
  justify-content: center;
  view {
    width: 160rpx;
    height: 60rpx;
    margin: 0 30rpx;
    line-height: 60rpx;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #fff;
    text-align: left;
    font-style: normal;
    text-transform: none;
    text-align: center;
  }
}
.current-tab {
  width: 160rpx;
  height: 60rpx;
  margin: 0 30rpx;
  line-height: 60rpx;
  background: #ffffff;
  border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #4b49e8 !important;
  text-align: left;
  font-style: normal;
  text-transform: none;
  text-align: center;
}
.theme-box {
  position: absolute;
  bottom: 0;
  left: 20rpx;
  display: flex;
  justify-content: space-around;
  background-color: #4b49e8;
  width: 712rpx;
  height: 212rpx;
  border-radius: 40rpx 40rpx 0 0;
  background: linear-gradient(124deg, #f3f5f5 0%, #c9e5ff 100%);
  .left {
    margin-left: -36rpx;
    margin-top: 12rpx;
    .fnish-icon {
      width: 36rpx;
      margin-right: 20rpx;
    }
  }
  .right-icon {
    width: 236rpx;
    margin-top: 36rpx;
    margin-right: -40rpx;
  }
}
.list {
  display: flex;
  margin: 19rpx;
  width: calc(100% - 38rpx);
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  .list-item {
    width: 32%;
    height: 350rpx;
    margin-bottom: 34rpx;
	border: 1px solid transparent;
    .textbook-img {
      border-radius: 16rpx;
      width: 100%;
      height: 296rpx !important;
    }
    .textbook-name {
      text-align: center !important;
      width: 100%;
      height: 40rpx;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #000000;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .current-list-item {
    border: 1px solid #5c559e;
    border-radius: 16rpx;
    background-color: #fff;
	box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(146,143,255,0.28);
  }
}
.list:after {
  content: '';
  width: 32%;
}
.left-one {
  margin-top: 56rpx;
  margin-bottom: 24rpx;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 500;
  font-size: 40rpx;
  color: #1580ed;
  line-height: 47rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.left-two {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #1580ed;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
